<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Listening to SCTE-EMSG Events</title>

    <script src="../../dist/dash.all.debug.js"></script>

    <!-- Bootstrap core CSS -->
    <link href="../lib/bootstrap/bootstrap.min.css" rel="stylesheet">
    <link href="../lib/main.css" rel="stylesheet">

    <style>
        video {
            width: 640px;
            height: 360px;
        }

        #start,#receive {
            height:500px;
            margin-top: 20px;
            font-size: 10px;
        }
    </style>

    <script class="code">
        var player;
        const URL = "https://livesim.dashif.org/livesim/scte35_2/testpic_2s/Manifest.mpd";
        const SCHEMEIDURI = "urn:scte:scte35:2013:xml";
        const EVENT_MODE_ON_START = dashjs.MediaPlayer.events.EVENT_MODE_ON_START;
        const EVENT_MODE_ON_RECEIVE = dashjs.MediaPlayer.events.EVENT_MODE_ON_RECEIVE;

        function init() {
            player = dashjs.MediaPlayer().create();
            player.updateSettings({ 'debug': { 'logLevel': dashjs.Debug.LOG_LEVEL_NONE }});
            player.on(SCHEMEIDURI, showStartEvent, null); /* Default mode is onStart, no need to specify a mode */
            player.on(SCHEMEIDURI, showReceiveEvent, null, { mode: EVENT_MODE_ON_RECEIVE });
            player.initialize(document.querySelector("video"), URL, true);
        }

        function showStartEvent(e) {
            showEvent(e, "start");
        }

        function showReceiveEvent(e) {
            showEvent(e, "receive");
        }

        function showEvent(e, output) {
            /* We double process in order to pretty-print. Only two levels of object properties are exposed. */
            for (var name in e) {
                if (typeof e[name] != 'object') {
                    log("    " + name + ": " + e[name], output);
                }
            }
            for (name in e) {
                if (typeof e[name] == 'object' ) {
                    log("    " + name + ":", output);
                    for (name2 in e[name]) {
                        log("        " + name2 + ": " + JSON.stringify(e[name][name2]), output);
                    }
                }
            }
            log("", output);
        }

        function log(msg, output) {
            msg = msg.length > 200 ? msg.substring(0, 200) + "..." : msg; /* to avoid repeated wrapping with large objects */
            var tracePanel = document.getElementById(output);
            tracePanel.innerHTML += msg + "\n";
            tracePanel.scrollTop = tracePanel.scrollHeight;
            console.log(msg);
        }
    </script>
</head>
<body>

<main>
    <div class="container py-4">
        <header class="pb-3 mb-4 border-bottom">
            <img class=""
                 src="../lib/img/dashjs-logo.png"
                 width="200">
        </header>
        <div class="row">
            <div class="col-md-12">
                <div class="h-100 p-5 bg-light border rounded-3">
                    <h3>Listening to SCTE-EMSG Events</h3>
                    <p>This sample catches and displays SCTE-35 events embedded inside EMSG boxes. The live sample stream being used contains embedded events at 10s and 40s in to each minute of media time.</p>
                </div>
            </div>
        </div>
        <div class="row mt-2">
            <div class="col-md-6">
                <video controls="true"></video>
            </div>
        </div>
        <div class="row">
            <div class="col-md-6">
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Trapped on_receive events will be displayed here" id="receive"></textarea>
                    <label for="receive">Received Events</label>
                </div>
            </div>            
            <div class="col-md-6">
                <div class="form-floating">
                    <textarea class="form-control" placeholder="Trapped on_start events will be displayed here" id="start"></textarea>
                    <label for="start">Started Events</label>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-md-12">
                <div id="code-output"></div>
            </div>
        </div>
        <footer class="pt-3 mt-4 text-muted border-top">
            &copy; DASH-IF
        </footer>
    </div>
</main>


<script>
    document.addEventListener('DOMContentLoaded', function () {
        init();
    });
</script>
<script src="../highlighter.js"></script>
</body>
</html>
